<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="80px">
      <div class="show">
        <el-form-item label="标题">
          <el-input class="input" v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input class="input" v-model="form.description" disabled></el-input>
        </el-form-item>
        <!--      <el-form-item label="时间">
                <el-col :span="11">
                  <el-time-picker placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker>
                </el-col>
              </el-form-item>-->

        <!-- 遍历已创建的选项渲染 -->
        <div class="item" v-for="(item, index) in form.itemList" :key="index">
          <el-form-item :label="(index+1)+''">
            <div class="item_title">
              <span>、{{ typeMap[item.type] }}: </span>
              <span v-text="item.title"></span>
            </div>
            <!-- 单项填空 -->
            <div v-if="item.type==='input'">
              <el-input class="disabled" placeholder="禁止输入" disabled  type="textarea" :rows="2" ></el-input>
            </div>
            <!-- 单选 -->
            <div v-else-if="item.type==='radio'">
              <div class="warp" v-for="(elm, i) in item.textList" :key="i">
                <el-radio :label="(i+1)+'、'"></el-radio>
                <el-input class="input" v-model="item.textList[i]" ></el-input>
              </div>
            </div>

            <!-- 多选 -->
            <div v-else-if="item.type==='checkbox'">
              <div class="warp" v-for="(elm, i) in item.textList" :key="i">
                <el-checkbox :label="(i+1)+'、'"></el-checkbox>
                <el-input class="input" v-model="item.textList[i]"></el-input>
              </div>
            </div>

            <!-- 选择填空 -->
            <div v-else-if="item.type === 'select'">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="(elm, i) in item.textList" :key="i"
                  :label="item.textList[i]"
                  :value="i+''">
                </el-option>
              </el-select>
            </div>

            <!-- 矩阵填空 -->
            <div v-else-if="item.type==='matrix'">
              <div class="warp" v-for="(elm, i) in item.textList" :key="i">
                <span> {{ item.textList[i] }}：</span>
                <el-input class="disabled" placeholder="禁止输入" disabled></el-input>
              </div>
            </div>
            <!-- 上移、下移、删除 -->
            <div style="margin-top: 10px">
              <el-button @click="handleItem('up', item)" v-if="index!=0">上移</el-button>
              <el-button @click="handleItem('down', item)" v-if="index!=form.itemList.length-1">下移</el-button>
              <el-button @click="handleItem('del', item)">删除</el-button>
              <el-button @click="edit(item, index)">编辑</el-button>
            </div>
          </el-form-item>
        </div>

        <!-- 添加选项 -->
        <el-form-item>
          <el-button @click="add('radio')">单选</el-button>
          <el-button @click="add('checkbox')">多选</el-button>
          <el-button @click="add('input')">单项填空</el-button>
          <!--        <el-button @click="add('select')">选择填空</el-button>
                  <el-button @click="add('matrix')">矩阵填空</el-button>-->
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="show" >已有问题</el-button>
          <el-button type="primary" @click="onSubmit">立即发布</el-button>
          <el-button type="primary" @click="preview">预览问卷</el-button>
          <el-button type="primary" @click="answer">回答问卷</el-button>

        </el-form-item>
      </div>
      <!-- 添加选项弹出框 -->
      <div class="additem">
        <el-dialog
          :title="typeMap[questItem.type]"
          :visible.sync="showItem"
          width="50%">
          <el-form-item label="标题">
            <el-input v-model="itemTitle"></el-input>
          </el-form-item>
          <el-form-item label="添加选项" v-show="questItem.type != 'input'">
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
          </el-form-item>
          <el-form-item label="选项" v-for="(text, i) in itemText" :key="i" v-show="questItem.type != 'input'">
            <el-input v-model="itemText[i]"></el-input>
          </el-form-item>
          <span slot="footer" class="dialog-footer">
            <el-button @click="clearItem">取 消</el-button>
             <el-button @click="getId">加入问卷</el-button>
            <el-button type="primary" @click="determine">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
    <el-form ref="form" :model="form"  :visible.sync="listvisible" label-width="80px">
      <!--      <div>{{ title }}</div>-->
      <!-- 遍历已创建的选项渲染 -->
      <div class="item" v-for="(item, index) in questItem" :key="index">
        <el-form-item :label="(index+1)+''">
          <div class="item_title">
            <span>、{{ typeMap[item.type] }}: </span>
            <span v-text="item.title"></span>
          </div>
          <!-- 单项填空 -->
          <div v-if="item.type==='input'">
            <el-input class="disabled" placeholder="禁止输入" disabled   type="textarea" :rows="2" ></el-input>
          </div>
          <!-- 单选 -->
          <div v-else-if="item.type==='radio'">
            <div class="warp" v-for="(elm, i) in item.textList" :key="i">
              <el-radio :label="(i+1)+'、'"></el-radio>
              <el-input class="input" v-model="item.textList[i]" ></el-input>
            </div>
          </div>

          <!-- 多选 -->
          <div v-else-if="item.type==='checkbox'">
            <div class="warp" v-for="(elm, i) in item.textList" :key="i">
              <el-checkbox :label="(i+1)+'、'"></el-checkbox>
              <el-input class="input" v-model="item.textList[i]"></el-input>
            </div>
          </div>

          <!-- 选择填空 -->
          <div v-else-if="item.type === 'select'">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="(elm, i) in item.textList" :key="i"
                :label="item.textList[i]"
                :value="i+''">
              </el-option>
            </el-select>
          </div>
          <!-- 上移、下移、删除 -->
          <div style="margin-top: 10px">
            <el-button @click="handleItem('up', item)" v-if="index!=0">上移</el-button>
            <el-button @click="handleItem('down', item)" v-if="index!=form.itemList.length-1">下移</el-button>
            <el-button @click="handleItem('del', item)">删除</el-button>
            <el-button @click="edit(item, index)">编辑</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
// import previewQuestion from './previewQuestion'

export default {
  // components: {
  //   previewQuestion: previewQuestion
  // },
  created () {
    this.form.name = this.$route.query.title
    this.form.description = this.$route.query.description
    this.form.nid = this.$route.query.id
  },
  data () {
    return {
      value: '',
      matrixsNum: 1,
      num: 1,
      form: {
        itemList: [],
        description: '',
        name: '',
        date: '',
        nid: ''
      },
      itemTitle: '',
      itemText: new Array(1),
      questItem: {},
      qshowItem: {},
      showItem: false,
      typeMap: {
        radio: '单选',
        checkbox: '多选',
        input: '问答'
      },
      nnn: 1,
      listvisible: true,
      type: '',
      editIndex: ''
    }
  },
  watch: {
    showItem () {
      if (!this.showItem) {
        this.clearItem()
      }
    }
  },
  methods: {
    // 创建选项
    add (type) {
      this.questItem.type = type
      this.showItem = true
      this.type = type
    },
    // 增加/减少 子选项
    handleChange (val) {
      this.itemText.length = val
    },
    getId () {
      this.$http.get('/questionnaire/getId').then(({ data }) => {
        this.nnn = data.data
        console.log(data.data)
        console.log(this.nnn)
      })
    },
    // 确定将选项添加进列表中进行渲染
    determine () {
      if (this.questItem.type === 'input') {
        // 填空
        if (this.itemTitle === '') {
          this.$message('请输入选项的标题内容')
          return
        }
        if (this.editIndex !== '') {
          this.questItem.title = this.itemTitle
          this.form.itemList.splice(this.editIndex, 1, this.questItem)
          this.editIndex = ''
        } else {
          this.questItem.title = this.itemTitle
          this.form.itemList.push(this.questItem)
        }
        this.$http.post('/question/add', {
          title: this.questItem.title,
          naireId: this.nnn,
          type: this.type
          // title: this.itemTitle,
          // naireId: nnn,
          // options: this.itemText[0],
          // options2: this.itemText[1],
          // options3: this.itemText[2],
          // options4: this.itemText[3]
        }).then(({ data }) => {
          if (data.code === 200) {
            this.$message.success('创建题目成功')
            // location.reload()
          } else {
            this.$message.error('创建题目失败')
          }
        })
        console.log('添加填空')
        this.clearItem()
      } else if (this.questItem.type === 'radio' || this.questItem.type === 'checkbox' || this.questItem.type === 'matrix' || this.questItem.type === 'select') {
        // 单选、多选、矩阵
        if (this.itemTitle === '') {
          this.$message('请输入选项的标题内容')
          return
        }
        for (var i = 0; i < this.itemText.length; i++) {
          if (this.itemText[i] === '' || this.itemText[i] === undefined) {
            this.$message('请完整输入每个选项内容')
            return
          }
        }
        if (this.editIndex !== '') {
          this.questItem.title = this.itemTitle
          this.questItem.textList = this.itemText
          this.form.itemList.splice(this.editIndex, 1, this.questItem)
          this.editIndex = ''
        } else {
          this.questItem.title = this.itemTitle
          this.questItem.textList = this.itemText
          this.form.itemList.push(this.questItem)
        }
        this.$http.post('/question/add', {
          title: this.questItem.title,
          naireId: this.nnn,
          options: this.questItem.textList[0],
          options2: this.questItem.textList[1],
          options3: this.questItem.textList[2],
          options4: this.questItem.textList[3],
          type: this.type
          // title: this.itemTitle,
          // naireId: nnn,
          // options: this.itemText[0],
          // options2: this.itemText[1],
          // options3: this.itemText[2],
          // options4: this.itemText[3]
        }).then(({ data }) => {
          if (data.code === 200) {
            this.$message.success('创建题目成功')
            // location.reload()
          } else {
            this.$message.error('创建题目失败')
          }
        })
        // console.log(this.nnn)
        this.clearItem()
      }
      this.clearItem()
    },
    // 编辑
    edit (item, editIndex) {
      this.editIndex = editIndex
      if (item.type !== 'input') {
        this.num = item.textList.length
        this.showItem = true
        this.questItem = item
        this.itemTitle = item.title
        this.itemText = []
        this.itemText.push(...item.textList)
      } else {
        this.showItem = true
        this.questItem = item
        this.itemTitle = item.title
      }
    },
    // 关闭弹窗，清空数据
    clearItem () {
      this.num = 1
      this.itemTitle = ''
      this.itemText = ['']
      this.questItem = {}
      this.showItem = false
    },
    // 判断上移、下移、删除
    handleItem (val, item) {
      switch (val) {
        case 'up':
          this.moveUp(item)
          break
        case 'down':
          this.moveDown(item)
          break
        case 'del':
          this.delItem(item)
          break
        default:
          throw new Error('该操作不存在！')
      }
    },
    // 上移
    moveUp (item) {
      const index = this.form.itemList.indexOf(item)
      this.form.itemList.splice(index, 1)
      this.form.itemList.splice(index - 1, 0, item)
    },
    // 下移
    moveDown (item) {
      const index = this.form.itemList.indexOf(item)
      this.moveUp(this.form.itemList[index + 1])
    },
    // 删除
    delItem (item) {
      const index = this.form.itemList.indexOf(item)
      this.form.itemList.splice(index, 1)
    },
    // 提交
    onSubmit () {
      if (this.form.name === '') {
        this.$message('请输入标题内容')
        return
      }
      if (this.form.itemList.length === 0) {
        this.$message('至少添加一个选项')
        return
      }
      // console.log(this.form)
      this.$router.push('../postQuestion')
    },
    answer () {
      // let nnn = 1
      // this.$http.get('/questionnaire/getId').then(({ data }) => {
      // nnn = data.data
      // this.$router.push('../answerQuestion')
      this.$router.push({
        path: '../answerQuestion',
        // query: {
        //   id: this.from.nid
        // }
      })
      // })
    },
    preview () {
      /* if(this.form.name == ''){
        this.$message('请输入标题内容');
        return
      }
      if(this.form.itemList.length == 0){
        this.$message('至少添加一个选项');
        return
      } */
      console.log(this.form.itemList)
      this.$router.push({
        path: '/previewQuestion',
        query: {
          name: this.form.name,
          list: this.form.itemList
        }
      })
    },
    show () {
      this.$http.get(`/questionnaire/preview/${this.from.nid}`).then(({ data }) => {
        this.qshowItem = data.data
        console.log(data.data)
      })
      this.listvisible = true
    }
  }
}
</script>
<style lang="less" scoped>
.warp {
  display: flex;
  align-items: center;
}

.disabled {
  background: #F5F7FA;
  width: 250px;
}
.show{
  background: rgba(170, 201, 241, 0.5);
  background-repeat: repeat-y;
  background-position: center top;
  width: 800px;
}
.input {
  //-webkit-appearance: none;
  //background-color: #FFF;
  //background-image: none;
  //border-radius: 4px;
  //border: 1px solid #DCDFE6;
  //box-sizing: border-box;
  //color: #606266;
  //font-size: inherit;
  //height: 40px;
  width: 250px;
  //line-height: 40px;
  //outline: 0;
  //padding: 0 15px;
  //transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  //margin: 10px 0 0;
}

.el-radio {
  color: #606266;
  cursor: pointer;
  margin-right: 0;
}
</style>
